<template>
  <div :id="echarts" :style="getheight" class="backtran"></div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'bar',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    chartData: {
      type: Object,
      default: () => []
    },
    height: {
      type: Number,
      default: 340
    },
    title: {
      type: String,
      default: ''
    },
    unit: {
      type: Array,
      default: () => []
    },
    color: {
      type: Array,
      default: () => [
        { offset: 0, color: '#33FF8F' },
        { offset: 0.8, color: '#6185EC' }
      ]
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      list: [],
      option: {
        title: {
          text: this.title,
          textStyle: {
            fontSize: '18px',
            color: '#fff',
            fontWeight: 'normal'
          },
          top: '0',
          left: '0'
        },
        grid: { top: '30px', left: '50px', right: '50px', bottom: '50px' },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: 2,
          icon: 'rect',
          data: this.chartData.legend,
          textStyle: {
            color: '#B4B4B4'
          }
        },
        tooltip: {
          trigger: 'axis'
        },

        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 10
            }
          }
        },
        yAxis: [],

        series: []
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )
      window.onresize = chartFactor.resize
      let List = this.chartData.y
      let series = []
      let yAxis = []
      let legends = this.chartData.legend
      let xData = this.chartData.x
      let areaStyle = {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, this.color),
          shadowColor: 'rgba(250,180,101,0.2)',
          shadowBlur: 20
        }
      }
      let itemStyle = {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, this.color),
          barBorderRadius: [30, 30, 0, 0]
        }
      }
      for (let i in List) {
        let serie =
          i > 0
            ? {
                type: 'line',
                yAxisIndex: i,
                name: legends[i],
                data: List[i],
                smooth: true,
                areaStyle,
                itemStyle: {
                  normal: {
                    color: '#3bbc86'
                  }
                }
              }
            : {
                type: 'bar',
                yAxisIndex: i,
                barMinWidth: 5,
                name: legends[i],
                data: List[i],
                itemStyle
              }

        let temp = {
          type: 'value',
          scale: true,
          splitNumber: 3,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            formatter: `{value} ${this.unit[i] || ''}`,
            textStyle: {
              color: '#fff',
              fontSize: 10
            }
          }
        }
        series.push(serie)
        yAxis.push(temp)
      }
      this.option.yAxis = yAxis
      this.option.xAxis.data = xData
      this.option.series = series
      chartFactor.setOption(this.option)
    }
  }
}
</script>
<style lang="scss" scoped>
.backtran {
  background-color: transparent;
}
</style>